<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自定义节点选中样式</title>
</head>

<body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 本案例演示如何通过交互设置元素状态：当鼠标hover到圆形节点上时，圆形节点执行动画效果
       * by 镜曦。
      */
      G6.registerNode('animate-circle', {
          setState: function setState(name, value, item) {
              var shape = item.get('keyShape');
              const cfg = item.get('model');
              if (name === 'running') {
                  if (value) {
                      shape.animate({
                          repeat: true,
                          onFrame: function onFrame(ratio) {
                              var diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
                              return {
                                  r: cfg.size / 2 + diff
                              };
                          }
                      }, 1000, 'easeCubic');
                  } else {
                      shape.stopAnimate();
                      shape.attr('lineDash', null);
                  }
              }
          }
      }, 'circle');
      const data = {
          nodes: [{
              x: 100,
              y: 100,
              shape: 'animate-circle',
              label: 'animate-circle',
              id: 'node1',
              size: 30,
              labelCfg: {
                  position: 'bottom'
              },
              
          }, {
              x: 400,
              y: 100,
              shape: 'rect',
              label: 'rect2',
              id: 'node2',
              labelCfg: {
                  position: 'bottom'
              },
            
          }
          ],
          edges: [
              {
                  source: 'node1',
                  target: 'node2',
                  label: 'line',
                  labelCfg: {
                      refY: 10
                  },
                  style: {
                      endArrow: true
                  }
              }
          ]
      };

      const graph = new G6.Graph({
          container: 'mountNode',
          width: 1000,
          height: 600,
          defaultNode: {
            style: {
              fill: '#87e8de'
            },
            color: '#87e8de'
          },
          defaultEdge: {
            color: '#bae7ff'
          },
          modes: {
              default: ['drag-node', {
                  type: 'drag-node',
              }],
          }
      });
      graph.data(data);
      graph.render();

      graph.on('node:mouseenter', function (ev) {
          var node = ev.item;
          graph.setItemState(node, 'running', true);
      });

      graph.on('node:mouseleave', function (ev) {
          var node = ev.item;
          graph.setItemState(node, 'running', false);
      });
    </script>
</body>

</html>